<template>
    <div class="Personalcenter">
        <div class="back-g">

            <div class="back-gm">
                <div class="back-gmw">

                    <div class="back-warp">
                        <HeadHang/>
                        <div class="warp-left">

                            <div class="enav">
                                <ul>
                                    <li><font-awesome-icon icon="home" fixed-width />个人信息</li>
                                    <router-link tag="li" to="/Personalcenter/Information">
                                    个人资料</router-link>

                                    <li>账号绑定</li>
                                </ul>
                            </div>
                            <div class="enav">
                                <ul>
                                    <li><font-awesome-icon icon="dollar-sign" fixed-width />账户管理</li>
                                    <router-link tag="li" to="/Personalcenter/Account">
                                    积分详情</router-link>
                                    <li>消费记录</li>
                                    <li>图书兑换记录</li>
                                </ul>
                            </div>
                            <div class="enav">
                                <ul>
                                    <li><font-awesome-icon icon="book-open" fixed-width />我的收藏</li>
                                    <router-link tag="li" to="/Personalcenter/Record">
                                    个人主页</router-link>

                                    <li>个人设置</li>
                                    <li>帮助</li>
                                    <li>鸣谢</li>
                                </ul>
                            </div>

                        </div>
                        <div class="warp-right">
                            <router-view></router-view>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import HeadHang from '@/components/HeadHang'
export default {
    name: 'Personalcenter',
    components: {
    HeadHang,
    }
}
</script>




<style scoped>
    ul li{
        cursor: pointer;
    }
    *{
        box-sizing: border-box;
    }
    .back-gh{

        margin: 0 auto;
        margin-bottom: 30px;
    }
    .header-bottom{
        margin: 0 auto;
        height: 45px;
        width: 980px;
        border-bottom: 2px solid #556565
    }
    .header-bottom ul li:hover{
       color:  #971d2d;
    }
    .back-gm{
        margin-top: 20px;
        width: 980px;

        margin: 0 auto;
    }
    .back-warp::after{
        clear: both;
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;



    }
    .header-bottom ul{
        height: 100%
    }
    .header-bottom li{
        font-size: 16px;
        line-height:45px;
        padding: 0 20px 0px 20px;
        float: left;
    }
    .header-bottom .far{
        float: right;
    }
    .enav{
        padding: 5xp 10px 5px 10px;
        width: 100%;
        flex: 1;
    }
    .enav ul{
        flex: 1;
    }
    .enav ul{
        height: 100%;
        display: flex;
        flex-direction:column;
    }
    .enav svg{
        margin-right: 4px;
        top: 11px;
        left: 8px;
        height: 14px;
        width: 14px;
        overflow: hidden;
        size: 16px;
    }
    .enav ul li{
        padding-left: 50px;
        line-height: 40px;
        font-size: 12px;
        color: #666;
        /* border-top: #fff solid 1px;
        border-bottom: #fff solid 1px; */
        border-bottom: #ddd dotted 1px;
    }
    .enav ul>:first-child{
        padding-left: 18px;
        font-size: 14px;
        color: #333;
    }
    .warp-left{
        float: left;
        height: 100%;
        border: #ddd solid 1px;
        width: 178px;
        flex-direction:column;

    }
    .warp-right{
        width: 758px;
        padding: 35px 30px 30px 30px;
        float: right;
        border: #ddd solid 1px;
    }
    .back-gmw{
        height: 100%;
    }
</style>

